<!-- author: xuett -->
<!-- date: 2025-07-28 17:55:38 -->
<!-- description: 机构选择弹窗 -->
<template>
  <el-row>
    <el-dialog v-model="visible" title="选择转办机构" width="800px" top="5vh" append-to-body>
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="用户名称" prop="orgName">
          <el-input v-model="queryParams.orgName" placeholder="请输入机构名称" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-table ref="tableRef" border :data="orgList" height="260px" @row-click="clickRow" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="机构名称" prop="orgName" :show-overflow-tooltip="true" />
        </el-table>
        <pagination v-if="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
      </el-row>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSelectUser">确 定</el-button>
          <el-button @click="visible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </el-row>
</template>

<script setup name="SelectUser" lang="ts">
import { getDissentOrgList } from '@/api/xydz/dissent/index';
import { orgVO } from '@/api/xydz/dissent/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const $emit = defineEmits(['selectOrg']);

const orgList = ref<orgVO[]>([]);
const visible = ref(false);
const total = ref(0);
const orgIds = ref<Array<string | number>>([]);

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  orgName: ''
});

const tableRef = ref<ElTableInstance>();
const queryFormRef = ref<ElFormInstance>();

const show = () => {
  orgIds.value = [];
  getList();
  visible.value = true;
};

/**
 * 选择行
 */
const clickRow = (row: any) => {
  // ele的bug
  tableRef.value?.toggleRowSelection(row, false);
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: orgVO[]) => {
  orgIds.value = selection.map((item: orgVO) => item.orgId);
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  getList();
};

/** 查询数据 */
const getList = async () => {
  const res = await getDissentOrgList(queryParams);
  orgList.value = res.rows;
  total.value = res.total;
};

/**选择授权用户操作 */
const handleSelectUser = async () => {
  if (!orgIds.value.length) {
    proxy?.$modal.msgError('请选择要转办的机构');
    return;
  }
  $emit('selectOrg', orgIds.value);
  visible.value = false;
};
// 暴露
defineExpose({
  show
});
</script>
